<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>陈晓雨</title>
        <style type="text/css">
            @keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    75% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}

.shake-image {
    display: block;
    margin: 50px auto; /* Center the image */
    animation: shake 0.5s infinite; /* Apply the shake animation */
}

/* Optional: Add some delay to make it look more natural */
.shake-image:hover {
    animation-delay: -0.25s; /* Reset the animation on hover */
}
            .video-background {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    overflow: hidden;
}

.video-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%);
}

.content {
    position: relative;
    z-index: 1;
    /* ... 其他样式 ... */
}
            body{
                background-image: url();
                background-repeat: repeat-x;
                background-size: cover;
                background-position: center;
                background-size: 100% 100%;
                background-attachment: fixed;
                min-height: 100vh;
            }
            div{
                display: inline;
                width: 200px;
                height: 50px;
                background:rgb(173, 225, 255);
               padding: 20px;
               margin: 20px;
            }
            span{
                display: block;
                width: 200px;
                height: 50px;
                background: rgb(173, 225, 255);
                margin: 40px; 
                text-align: center;
            }
            a.confirm-link {
    position: relative;
    text-decoration: none;
    color: blue; /* or any color you prefer */
}

a.confirm-link:hover::after {
    content: attr(data-title);
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    margin-top: 5px;
    font-size: 12px;
    z-index: 1;
}
        </style>
    </head>
    <body>
        <table align="center">
            <tr align="center">
                <td align="center">
        <div>第一个DIV</div>
        <div>第二个DIV</div>
        <div>第三个DIV</div> 
        <span>第一个SPAN</span>
        <span>第二个SPAN</span>
        <span>第三个SPAN</span>
        <span>第四个SPAN</span>
        <a href="./js提交跳转.html" class="confirm-link" data-title="玉桂狗" data-message="是否跳转网页">
            <img src="./js.jpeg" alt="Example Image" width="200px" height="=200px" onmousemove="MM_effectShake(this)"   class="shake-image">
        </a>
    </td>
</tr>
    </table>
        <script type="text/javascript">
            function MM_effectShake(targetElement)
{
	Spry.Effect.DoShake(targetElement);
}
            document.addEventListener('DOMContentLoaded', () => {
    const links = document.querySelectorAll('.confirm-link');

    links.forEach(link => {
        link.addEventListener('click', (event) => {
            event.preventDefault(); 

            const title = link.getAttribute('data-title');
            const message = link.getAttribute('data-message');
            const href = link.getAttribute('href');

            if (confirm(message)) {
                window.location.href = href; 
            }
        });
    });
});
        </script>
        <a class="video-background">
            <video autoplay muted loop id="myVideo">
                <source src="./VCG42N1127249146.mp4" type="video/mp4">
            </video>
        </a>
    </body>
</html>
弹出窗口10S自动关闭
修改简历页面，当刷新超过1